<template>
    <div>
        <!-- 共用头部组件 -->
        <common-header
            headerTitle="拼团"
            :hasBack="true"
            :hasHome="true"
        ></common-header>
        <!-- 共用头部组件 -->

        <!-- 共用页面滚动组件 -->
        <common-scroll
            :scrollStyle="scrollStyle"
            :isLoadMore="false"
        >

            <img
                class="group-buy-adv"
                src="@/assets/images/home/activity-1-adv.png"
            />

            <div class="group-buy-list">
                <div
                    class="group-empty-tips"
                    v-if="groupList.length == 0"
                >{{emptyTips}}</div>
                <div
                    class="group-buy-item"
                    v-for="(item,index) of groupList"
                    :key="index"
                    v-if="index1List.indexOf(item.id) >= 0"
                    @click="goDetail(item.id)"
                >
                    <div class="item-img-box">
                        <img
                            class="item-img"
                            :src="item.imgs[0].title_img"
                        />
                        <!-- <div class="sale-num">已拼{{item.item_total}}件</div> -->
                    </div>
                    <div class="item-info">
                        <div class="item-title">{{item.title}}</div>
                        <div class="item-detail">{{item.title_sub}}</div>
                        <div class="item-group-price">
                            <div>{{item.member_count}}人团特享：￥<span class="price-large">{{item.price_master | currency}}</span></div>
                            <div class="item-normal-price">￥{{item.price_market | currency}}</div>
                        </div>
                        <div class="item-other-info">
                            <img
                                class="free-gift-img"
                                src="@/assets/images/groupBuy/free-gift-img.png"
                            />
                            <div class="go-group-buy">去拼团</div>
                        </div>
                    </div>
                </div>
            </div>

        </common-scroll>
        <!-- 共用页面滚动组件 -->
    </div>
</template>

<script>
import CommonHeader from '@/components/Header'
import CommonScroll from '@/components/Scroll'
export default {
    name: 'GroupBuyIndex1',
    components: {
        CommonHeader,
        CommonScroll
    },
    data() {
        return {
            scrollStyle: {
                top: '1.11rem',
                left: '0',
                right: '0',
                bottom: '0'
            },
            groupList: [],
            index1List: ['23', '24', '25', '26', '27', '28', '29', '30'],
            emptyTips: '正在全力加载中...'
        }
    },
    mounted() {
        this.getGroupList()
    },
    methods: {
        getGroupList() {
            this.axios.post('/api/group_buy/activity_list.json').then(res => {
                const data = res.data
                if (data.status == 1) {
                    if (data.data.list.length == 0) {
                        this.emptyTips = '暂无商品'
                    }
                    this.groupList = data.data.list
                } else {
                    this.commonDialog.alert('提示', data.msg)
                }
            })
        },
        goDetail(id) {
            this.$router.push({
                path: '/groupDetail',
                query: {
                    groupsId: id
                }
            })
        }
    },
    filters: {
        currency(value) {
            return parseFloat(value / 100).toFixed(2)
        }
    }
}
</script>

<style lang="stylus" scoped>
.group-buy-adv
    width 100%
.group-buy-list
    padding 0.42rem 0.4rem 0.42rem 0.4rem
    .group-empty-tips
        height 2rem
        line-height 2rem
        text-align center
        font-size 0.33rem
        color #999
    .group-buy-item
        display flex
        align-items center
        padding 0.26rem 0.16rem
        background #fff
        border-radius 5px
        margin-bottom 0.4rem
        .item-img-box
            position relative
            width 2.93rem
            height 2.93rem
            .item-img
                width 2.93rem
                height 2.93rem
            .sale-num
                position absolute
                bottom 0
                left 0
                right 0
                line-height 0.41rem
                text-align center
                font-size 0.32rem
                color #fff
                background #d7463c
        .item-info
            flex 1
            min-width 1px
            margin-left 0.26rem
            padding-right 0.26rem
            .item-title
                line-height 1.3
                font-size 0.37rem
                color #333
                white-space nowrap
                overflow hidden
                text-overflow ellipsis
            .item-detail
                line-height 1.3
                margin-top 0.21rem
                font-size 0.32rem
                color #666
                white-space nowrap
                overflow hidden
                text-overflow ellipsis
            .item-group-price
                display flex
                align-items baseline
                margin-top 0.21rem
                font-size 0.32rem
                color #d7463c
                .price-large
                    font-size 0.42rem
                .item-normal-price
                    margin-left 0.1rem
                    font-size 0.32rem
                    color #999
                    text-decoration line-through
            .item-other-info
                display flex
                align-items flex-end
                justify-content space-between
                margin-top 0.21rem
                .free-gift-img
                    height 0.58rem
                .go-group-buy
                    width 1.38rem
                    line-height 0.58rem
                    text-align center
                    background #d7463c
                    font-size 0.32rem
                    color #fff
                    border-radius 3px
    .group-buy-item:last-child
        margin-bottom 0
</style>


